<template>
  <div class="app-container">
    <el-form :model="form" label-width="160px" label-position="right" size="small" ref="MmvAddForm" inline >
    <MmvTitle title="车辆押金付款情况"></MmvTitle>
    <el-descriptions class="margin-top" :column="1" border  style="margin-bottom:10px;">
      <el-descriptions-item label-class-name="my-descriptions-label"  label="应付押金" :labelStyle="{width:'200px'}">{{detail.depositPayable||0}}元</el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label"  label="已付押金" :labelStyle="{width:'200px'}">
        <span >{{detail.depositPaidAmount||0}}元
          <span v-if="detail.depositPaidAmount">
            (<span v-if="detail.preLicensingAmount>0">预授权已付{{detail.preLicensingAmount}}元</span>&nbsp;&nbsp;<span v-if="detail.otherAmount>0">其他方式已付{{detail.otherAmount}}元</span>)
          </span>
        </span>

      </el-descriptions-item>
<!--      <el-descriptions-item label-class-name="my-descriptions-label"  label="待付押金" :labelStyle="{width:'200px'}">{{detail.depositPayable||0}}元</el-descriptions-item>-->
      <el-descriptions-item label-class-name="my-descriptions-label"  label="车损费用抵扣" :labelStyle="{width:'200px'}">{{detail.vehicleDamageExpense||'0元'}}</el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label"  label="押金结余" :labelStyle="{width:'200px'}">

        <span >{{detail.remainingDeposit||0}}元
          <span v-if="detail.remainingDeposit">
            (<span v-if="detail.preSurplus>0">预授权结余{{detail.preSurplus}}元</span>&nbsp;&nbsp;<span v-if="detail.notPreSurplus>0">其他方式结余{{detail.notPreSurplus}}元</span>)
          </span>
        </span>

      </el-descriptions-item>
    </el-descriptions>

      <template v-if="detail.remainingDeposit>0">
        <MmvTitle title="剩余押金结算"></MmvTitle>
          <el-row class="app-container">
            <el-radio-group v-model="settlementMethod" style="width: 100%">
              <el-radio :label="1" v-if="detail.illUnPaidAmount>0">转违章押金</el-radio>
              <el-radio :label="2">立即结算</el-radio>
              <el-radio :label="3">与违章押金同步结算</el-radio>
            </el-radio-group>
          </el-row>
          <el-row class="app-container" v-if="settlementMethod==1">
            <el-radio-group v-model="transferMethod" style="width: 100%"  >
              <el-radio :label="1">全部转违章</el-radio>
              <template v-if="detail.preSurplus>0&&detail.notPreSurplus>0">
                <el-radio :label="2">仅预授权转违章</el-radio>
                <el-radio :label="3">仅其他方式支付转违章</el-radio>
              </template>

            </el-radio-group>
          </el-row>

          <el-row v-if="settlementMethod==2" class="app-container">
            <span v-if="detail.preSurplus>0">预授权结余{{detail.preSurplus}}元</span>&nbsp;&nbsp;
            <span v-if="detail.notPreSurplus>0">其他方式结余{{detail.notPreSurplus}}元</span>将由财务人员进行退款
          </el-row>
          <el-row v-if="settlementMethod==1&&transferMethod==2" class="app-container">
            其他方式结余{{detail.notPreSurplus}}元，将由财务人员进行退款
          </el-row>
          <el-row v-if="settlementMethod==1&&transferMethod==3" class="app-container">
            预授权结余{{detail.preSurplus}}元，将由财务人员进行退款
          </el-row>
      </template>

      <div class="dialog-footer" style="text-align: end;">
        <el-button @click="DoDepositSettlement" type="primary">完成结算</el-button>
        <el-button @click="close()">关闭</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {
    depositSettlementDetails,
    overDepositSettlement
  } from '@/api/order/index';

  import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
  import Template from "@/views/system/template";
  import * as api from "@/api/order";
  export default {
    components: {
      Template,
      MmvTitle
    },
    props: ['orderNo'],
    data() {
      return {
        detail: {},
        form: {},
        settlementMethod: 2,
        transferMethod: 1,
        loading: true
      }
    },
    mounted() {
      this.depositSettlementDetails();
    },
    methods: {
      depositSettlementDetails() {
        depositSettlementDetails(this.orderNo).then(response => {
          this.detail = response.data || {};
          this.loading = false
        });
      },
      close() {
        this.$emit("close")
      },
      DoDepositSettlement() {
        let that=this;
        api.orderCostIspay(that.orderNo,1).then(res=>{
          if (res.data.code==1){
            that.$modal.confirm(res.data.title).then(function () {
              that.submitBtnLoading=true
              overDepositSettlement({orderNo:that.orderNo,settlementMethod:that.settlementMethod,transferMethod:that.transferMethod}).then((response) => {
                that.$message.success(response.msg)
                that.close()
              }).finally(err=>{
                that.submitBtnLoading=false
              });
            }).then(() => { }).catch(() => {})
          }else{
            that.submitBtnLoading=true
            overDepositSettlement({orderNo:that.orderNo,settlementMethod:that.settlementMethod,transferMethod:that.transferMethod}).then((response) => {
              that.$message.success(response.msg)
              that.close()
            }).finally(err=>{
              that.submitBtnLoading=false
            });
          }
        })
      }
    },

  }
</script>

<style scoped="scoped">
  .mmv-title {
    margin: 0 !important;
    border-bottom: none !important;
  }

  .el-form-item {
      margin-bottom: 0px !important;
  }

  .el-table--medium .el-table__cell {
      padding: 3px !important;
  }
</style>
